import 'package:flutter/material.dart';
import 'package:flutter_project/common/route_page/route_name.dart';
import 'package:flutter_project/common/utils/screen_size_utils.dart';
import 'package:flutter_project/config/theme_color.dart';
import '../common/search/search_home.dart';
import '../picture/chose_category_list_model.dart';
import 'home_category_choose_page.dart';
import 'home_category_tab_page.dart';
import 'package:flutter_draggable_gridview/flutter_draggable_gridview.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController importTabController;
  List tabList = ['视频', '推荐', '电影', '电视剧', '听书', '小说', '漫画', '经典', '知识'];
  List categoryNameList = [
    '反转',
    '逆袭',
    '都市脑洞',
    '家庭',
    '现代言情',
    '时空之旅',
    '总裁',
    '剧情',
    '都市日常',
    '先婚后爱'
  ];
  List<ChoseCategoryListModel> categoryList = [];

  List<DraggableGridItem> _listOfDraggableGridItem = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: MyAppBar(
        importTabController: importTabController,
        tabList: tabList,
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Expanded(
                child: HomeCateGoryTabPage(),
              ),
              GestureDetector(
                onTap: () {
                  RouteNames.push(const HomeCategoryChoosePage());
                },
                child: Container(
                  margin: const EdgeInsets.all(10),
                  color: Colors.white,
                  child: const Icon(Icons.arrow_drop_down_outlined),
                ),
              ),
            ],
          ),
          Expanded(
              child: TabBarView(
                  controller: importTabController, children: getTabList())),
          const SizedBox(height: 10,),
        ],
      ),
    );
  }

  List<Widget> getWrapList() {
    return List.generate(
      categoryList.length,
      (index) => Container(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        decoration: BoxDecoration(
            color: ThemeColor.mainBgColor,
            borderRadius: BorderRadius.circular(4)),
        child: Text(categoryList[index].name),
      ),
    );
  }

  void onDragAccept(
      List<DraggableGridItem> list, int beforeIndex, int afterIndex) {
    debugPrint('onDragAccept: $beforeIndex -> $afterIndex');
  }

  List<Widget> getTabList() {
    return List.generate(
      tabList.length,
      (index) => Container(
          color: Colors.white,
          child: DraggableGridViewBuilder(
            physics:const NeverScrollableScrollPhysics() ,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 3 / 4),
            children: _listOfDraggableGridItem,
            dragCompletion: onDragAccept,
            isOnlyLongPress: true,
            dragFeedback: feedback,
            dragPlaceHolder: placeHolder,
          )),
    );
  }

  Widget feedback(List<DraggableGridItem> list, int index) {
    return SizedBox(
      width: 200,
      height: 150,
      child: list[index].child,
    );
  }

  PlaceHolderWidget placeHolder(List<DraggableGridItem> list, int index) {
    return PlaceHolderWidget(
      child: Container(
        color: Colors.white,
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    importTabController = TabController(length: tabList.length, vsync: this);
    _generateImageData();
  }

  void _generateImageData() {
    for (var element in categoryNameList) {
      _listOfDraggableGridItem.add(DraggableGridItem(
        isDraggable: true,
        child: Container(
          color: ThemeColor.mainBgColor,
          child: Text(
            element,
            style: const TextStyle(color: Colors.blue),
          ),
        ),
      ));
    }
  }
}

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  final TabController importTabController;
  final List tabList;

  MyAppBar(
      {required this.importTabController, required this.tabList, super.key});

  double tabFontSize = 16.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(
          top: ScreenSizeUtils.safeStatusScreenHeight(context) + 15),
      child: Row(
        children: [
          SizedBox(
            width: ScreenSizeUtils.deviceScreenWidth(context) - 40,
            child: TabBar(
              isScrollable: true,
              tabs: getTabList(),
              controller: importTabController,
              indicator: const BoxDecoration(),
              unselectedLabelStyle: TextStyle(
                fontSize: tabFontSize,
              ),
              dividerHeight: 0.0,
              // 未选择样式
              labelStyle: const TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.w500,
              ),
              // 选择的样式
              tabAlignment: TabAlignment.center,
            ),
          ),
          GestureDetector(
            onTap: () {
              RouteNames.push(const SearchHomePage());
            },
            child: Icon(
              Icons.search,
              color: ThemeColor.mainColor,
            ),
          )
        ],
      ),
    );
  }

  List<Widget> getTabList() {
    return List.generate(
      tabList.length,
      (index) => Text(
        tabList[index],
      ),
    );
  }

  @override
  Size get preferredSize => const Size(double.infinity, 64);
}
